<template>
  <ElScrollbar class="email-detail-box">
    <div v-loading="loading" class="email-detail">
      <ElRow>
        <ElCol :span="12"><div>邮箱： {{ detail.emailUrl }}</div></ElCol>
        <ElCol :span="12"><div>来源： {{ getType(detail.emailType) }}</div></ElCol>
        <ElCol :span="12"><div>主题： {{ detail.subject }}</div></ElCol>
        <ElCol :span="12"><div>时间： {{ detail.date }}</div></ElCol>
      </ElRow>
      <div style="margin-top: 15px;">
        <div v-html="detail.content"></div>
      </div>
    </div>
  </ElScrollbar>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getEmailDetai } from '../api.ts'
import { emailTypeOptions } from '../constant.ts'

const props = defineProps<{ params: any }>()

const loading = ref(false)
const detail = ref<any>({})

const getType = (val) => {
  const obj = emailTypeOptions.find(i => i.value === val)
  return obj?.label || ''
}

const getDetail = () => {
  loading.value = true
  getEmailDetai(props.params)
    .then(res => {
      detail.value = res
    })
    .finally(() => {
      loading.value = false
    })
}

getDetail()
</script>

<style lang="scss" scoped>
.email-detail {
  min-height: 100px;
  padding: 20px;
  line-height: 2;
  &-box {
    height: 80vh;
  }
}
</style>
